<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          canvas {
            border: 1px solid #000;
          }
          body {
            width: 100vw;
            height: 100vh;
          }
        </style>
      </head>

      <body>
        <canvas id="myCanvas" width="800" height="800"></canvas>
        <button>下载</button>
        <script>
          var c = document.getElementById("myCanvas");
          var ctx = c.getContext("2d");
          const a = document.querySelector("button");
          var isdraw = false;
          
          c.onmousedown = function (e) {
            var x = e.clientX - c.offsetLeft;
            var y = e.clientY - c.offsetTop;
            isdraw = true;
            ctx.moveTo(x, y);
          };
          c.onmouseup = function () {
            isdraw = false;
          };
          c.onmousemove = function (e) {
            if (isdraw) {
              var x = e.clientX - c.offsetLeft;
              var y = e.clientY - c.offsetTop;
              ctx.lineTo(x, y);
              ctx.stroke();
            }
          };
          a.onclick = function (e) {
            e.preventDefault();
            const url = c.toDataURL("image/jpeg", 0.6);
            const a = document.createElement("a");
            document.body.appendChild(a);
            a.setAttribute('download','签名')
            a.href=url
            a.click();
          };

       
        </script>
      </body>
    </html>
  </body>
</html>
